<template>
  <!-- 姓名 性别 年龄 出生日期 地址 -->
  <el-table
    v-loading="loading"
    :data="users"
    style="width: 100%"
    @selection-change="sendIds">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="100">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别"
      width="50"
      :formatter="formatterSex">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
      width="50">
    </el-table-column>
    <el-table-column
      prop="birth"
      label="出生日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="addr"
      label="家庭地址">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <!-- 想要删除数据库中的需要id，删除state需要index -->
        <el-button type="text" size="small" @click="removeUser(scope.row.id, scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
// 在该组件中获取store中的state.users
import {mapState} from 'vuex'
export default {
  computed: {
    /* users () {
      return this.$store.state.users
    } */
    ...mapState(['users', 'loading'])
  },
  created () {
    this.$store.dispatch('getUsers')
  },
  methods: {
    formatterSex (row, column, cellValue) {
      return cellValue ? '男' : '女'
    },
    removeUser (id, index) {
      // console.log(id, index)
      this.$store.dispatch('removeUser', {
        id, index
      })
    },
    sendIds (users) {
      // console.log(users)
      const ids = users.map(user => user.id).join(',')
      this.$store.commit('setIds', ids)
    }
  }
}
</script>

<style>

</style>
